<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <title>旅游班车车票管理系统</title>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/vue-router.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script src="js/write-excel-file.min.js"></script>
    <script src="js/read-excel-file.min.js"></script>
    <link rel="stylesheet" href="css/12306.css"/>
</head>
<body>
    <div id="app">
        <div class="header">
            <div class="title" v-if="notsearch">旅游班车车票管理系统</div>
            <div class="title" v-if="!notsearch">查询结果</div>
            <div class="layui-container" style="height: 50px;">
                <div class="layui-row">
                    <div class="layui-col-md4" style="height: 50px;">
                        
                    </div>
                    <div class="layui-col-md5" style="height: 50px; position: relative;">
                        
                            <div class="layui-input-block" style="margin-left: 0px; float: left; width: 80%;">
                                <input type="text" autocomplete="off" class="layui-input" v-model="keyword">
                            </div>
                            <div @click="search" style="float: left; width: calc(20%-20px); line-height: 38px; padding-left: 20px;"><i class="layui-icon layui-icon-search"></i></div>
                        
                    </div>
                    <div class="layui-col-md3" style="height: 50px;">
    
    
                    </div>
                </div>
            </div>

            
            <div style="height: 36px; line-height: 36px; width: 300px; text-align: center; margin-left: calc(50% - 150px); padding-bottom: 10px; color: white;">
                <input type="radio" style="vertical-align: middle;" v-model="search_mode" name="search-mode" value="id" checked>车次查询&emsp;
                <input type="radio" style="vertical-align: middle;" v-model="search_mode" name="search-mode" value="start">起点查询&emsp;
                <input type="radio" style="vertical-align: middle;" v-model="search_mode" name="search-mode" value="target">目的地查询
            </div>
            
        </div>
        <div style="width: calc(100%-30px); padding-right: 30px; padding-top: 15px; height: 30px; line-height: 30px; color: #409EFF; cursor: pointer;" >
            
            <span style="float: right;" @click="add">插入一条</span>
            <span style="float: right;" @click="export_excel">导出Excel&emsp;</span>
            <span style="float: right;" @click="import_excel">导入Excel&emsp;</span>
            <input type="file" style="float: right; width: 190px; height: 30px; line-height: 30px;" id="inputfile" />
        </div>

        <div class="form" v-if="showform">
            <div class="form-box">

                <div class="layui-container" style="width: 500px; height: 100%;">
                    <div class="layui-row">
                        <div class="layui-col-md1" style="height: 100%;"></div>
                        <div class="layui-col-md10" style="height: 100%;">
                            <form class="layui-form" action="">

                                <div class="layui-form-item" style="margin-bottom: 5px;">
                                    <label class="layui-form-label">车次</label>
                                    <div class="layui-input-block" >
                                        <input type="text" v-model="id" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 5px;">
                                    <label class="layui-form-label">始发站</label>
                                    <div class="layui-input-block" >
                                        <input type="text" v-model="startStation" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 5px;">
                                    <label class="layui-form-label">经停站</label>
                                    <div class="layui-input-block" >
                                        <input type="text" v-model="stops" required  lay-verify="required" placeholder="请用英文逗号隔开多个站点" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 5px;">
                                    <label class="layui-form-label">终点站</label>
                                    <div class="layui-input-block" >
                                        <input type="text" v-model="arrivalStation" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 5px;">
                                    <label class="layui-form-label">载客量</label>
                                    <div class="layui-input-block" >
                                        <input type="text" v-model="capacity" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 5px;">
                                    <label class="layui-form-label">发车时间</label>
                                    <div class="layui-input-block" >
                                        <input type="text" v-model="departureTime" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                

                                <div class="layui-form-item" style="margin-bottom: 5px;">
                                    <label class="layui-form-label">班车频次</label>
                                    <div class="layui-input-block" >
                                        <input type="text" v-model="frequency" required  lay-verify="required"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                

                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="margin-left: 85px; margin-top: 15px;">
                                        <button class="layui-btn" style="width: 140px;"  @click="submit_update">立即提交</button>
                                        <button class="layui-btn layui-btn-primary" style="width: 140px;" @click="cancel_show">取消</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="layui-col-md1" style="height: 100%;"></div>
                    </div>
                </div>


            </div>
        </div>

        <table class="layui-table">
            <colgroup>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>车次</th>
                    <th>始发站</th>
                    <th>经停站</th>
                    <th>终点站</th>
                    <th>载客容量</th>
                    <th>发车时间</th>
                    <th>班车频次</th>
                    <th>操作</th>
                </tr> 
            </thead>

            <tbody v-if="notsearch">
              <tr v-for="(bus, index) in buses">
                <td>{{bus.id}}</td>
                <td>{{bus.startStation}}</td>
                <td>{{bus.stops}}</td>
                <td>{{bus.arrivalStation}}</td>
                <td>{{bus.capacity}}</td>
                <td>{{bus.departureTime}}</td>
                <td>{{bus.frequency}}</td>
                <td><span class="operation" @click="edit_bus(index)">编辑</span><span style="color: #409EFF;">&emsp;|&emsp;</span><span class="operation" @click="delete_bus(index)">删除</span></td>
              </tr>
            </tbody>

            <tbody v-if="!notsearch">
                <tr v-for="(bus, index) in search_buses">
                    <td>{{bus.id}}</td>
                    <td>{{bus.startStation}}</td>
                    <td>{{bus.stops}}</td>
                    <td>{{bus.arrivalStation}}</td>
                    <td>{{bus.capacity}}</td>
                    <td>{{bus.departureTime}}</td>
                    <td>{{bus.frequency}}</td>
                    <td><span class="operation" @click="edit_search_bus(index)">编辑</span><span style="color: #409EFF;">&emsp;|&emsp;</span><span class="operation" @click="delete_search_bus(index)">删除</span></td>
                </tr>
            </tbody>



        </table>
        <div v-if="!notsearch" style = "margin-top: 30px; width: 100px; margin-left: calc(50% - 50px);">
            <button @click="backtoindex" type="button" style="width: 100px;" class="layui-btn">返回</button>
        </div>
        <div style="height: 40px;"></div>
    </div>
    <script src="js/12306.js"></script>
    <script type="text/javascript">
        layui.use('form', function(){
            var form = layui.form;
        });
    </script>
</body>
</html>
